import React, { useEffect } from 'react';
import { DropdownButton, DropdownMenu, Image } from 'react-bootstrap';
import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Offcanvas from 'react-bootstrap/Offcanvas';
import {useTranslation} from 'react-i18next';

interface HomeNavBarProps{
  bgColor?:string;
}

const HomeNavBar:React.FC<HomeNavBarProps> = (props?:HomeNavBarProps) => {
    const expand = 'lg';

    const {t} = useTranslation();
    
  return (
        // {/* false, 'sm', 'md', 'lg', 'xl', 'xxl' */}
    <Navbar key={expand+""} expand={expand} sticky='top' fixed='top' /*className="bg-body-tertiary"*/
    style={{margin:0,backgroundColor:props?.bgColor||'rgba(0,0,0,0)'}}>
          <Container fluid style={{margin:0,backgroundColor:'rgba(0,0,0,0)'}}>
            <Navbar.Brand href="#"><Image width={35} src={require("../../resources/images/carrot.jpeg")}/></Navbar.Brand>
            <Navbar.Toggle aria-controls={`offcanvasNavbar-expand-${expand}`}/>
            <Navbar.Offcanvas
              id={`offcanvasNavbar-expand-${expand}`}
              aria-labelledby={`offcanvasNavbarLabel-expand-${expand}`}
              placement="end"
            >
              <Offcanvas.Header closeButton>
                <Offcanvas.Title id={`offcanvasNavbarLabel-expand-${expand}`}>
                  Settings
                </Offcanvas.Title>
              </Offcanvas.Header>
              <Offcanvas.Body>
                <Nav className="justify-content-end flex-grow-1 pe-3">
                  <Nav.Link href="/">{t("top_menu.home")}</Nav.Link>
                  <Nav.Link href="/mall">{t("top_menu.mall")}</Nav.Link>
                  <Nav.Link href="/chat">{t("top_menu.chat")}</Nav.Link>
                  <Nav.Link href="/blog">{t("top_menu.myblog")}</Nav.Link>
                  <Nav.Link href="/graphqlpg">GraphQL</Nav.Link>
                  <Nav.Link href="/inference">Inference</Nav.Link>
                  <Nav.Link href="/document">{t("top_menu.document")}</Nav.Link>
                  <Nav.Link href="/tools">Tools</Nav.Link>
                  <Nav.Link href="/aboutus">{t("top_menu.aboutus")}</Nav.Link>
                  {/* add logic to show/hide the settings menu item according to user role. */}
                  <NavDropdown
                    title={t("top_menu.more")}
                    id={`offcanvasNavbarDropdown-expand-${expand}`}
                    drop='start'
                  >
                    <NavDropdown.Item href="/settings">Settings</NavDropdown.Item>
                    <NavDropdown.Item href="/contactus">Contact us</NavDropdown.Item>
                  </NavDropdown>
                </Nav>
                {/* <Form className="d-flex">
                  <Form.Control
                    type="search"
                    placeholder="Search all in this site"
                    className="me-2 pe-2"
                    aria-label="Search"
                  />
                  <Button variant="outline-success">Search</Button>
                </Form> */}
              </Offcanvas.Body>
            </Navbar.Offcanvas>
          </Container>
        </Navbar>        
  );
}

export default HomeNavBar;